"use client"

import {Button} from "@/components/ui/button"
import {Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle} from "@/components/ui/card"
import {ScrollArea} from "@/components/ui/scroll-area"
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs"
import {Clipboard, Code, Eye} from "lucide-react"
import {ComponentPreview} from "@/components/component-preview"

interface PreviewPanelProps {
    code: string
    onCopy: () => void
    componentName: string
}

export function PreviewPanel({code, onCopy, componentName}: PreviewPanelProps) {
    return (
        <div className="space-y-6">
            <Tabs defaultValue="code" className="w-full">
                <TabsList className="grid w-full grid-cols-2">
                    <TabsTrigger value="code" className="flex items-center gap-2">
                        <Code className="h-4 w-4"/>
                        <span>代码</span>
                    </TabsTrigger>
                    <TabsTrigger value="preview" className="flex items-center gap-2">
                        <Eye className="h-4 w-4"/>
                        <span>预览</span>
                    </TabsTrigger>
                </TabsList>

                <TabsContent value="code" className="space-y-4 mt-4">
                    <Card>
                        <CardHeader className="flex flex-row items-center justify-between">
                            <div>
                                <CardTitle>{componentName}.vue</CardTitle>
                                <CardDescription>Vue3 + TypeScript + TailwindCSS 组件代码</CardDescription>
                            </div>
                            <Button variant="outline" size="icon" onClick={onCopy}>
                                <Clipboard className="h-4 w-4"/>
                            </Button>
                        </CardHeader>
                        <CardContent>
                            <ScrollArea className="h-[500px] w-full rounded-md border p-4">
                <pre className="font-mono text-sm">
                  <code>{code || "请先生成组件代码"}</code>
                </pre>
                            </ScrollArea>
                        </CardContent>
                        <CardFooter className="flex justify-between">
                            <p className="text-sm text-muted-foreground">生成的代码可以直接复制到您的Vue3项目中使用</p>
                            <Button variant="outline" onClick={onCopy}>
                                <Clipboard className="h-4 w-4 mr-2"/>
                                复制代码
                            </Button>
                        </CardFooter>
                    </Card>
                </TabsContent>

                <TabsContent value="preview" className="space-y-4 mt-4">
                    <Card>
                        <CardHeader>
                            <CardTitle>组件预览</CardTitle>
                            <CardDescription>生成组件的可视化预览（简化版）</CardDescription>
                        </CardHeader>
                        <CardContent>
                            <div className="border rounded-md p-4 bg-gray-50 dark:bg-gray-900 min-h-[300px]">
                                {code ? (
                                    <ComponentPreview code={code}/>
                                ) : (
                                    <div className="flex items-center justify-center h-[300px] text-muted-foreground">
                                        请先生成组件代码
                                    </div>
                                )}
                            </div>
                        </CardContent>
                        <CardFooter>
                            <p className="text-sm text-muted-foreground">
                                注意：预览功能仅提供简化的静态视图，某些动态功能可能无法展示
                            </p>
                        </CardFooter>
                    </Card>
                </TabsContent>
            </Tabs>
        </div>
    )
}
